import React from 'react';
import { HashRouter, Routes, Route, Navigate } from 'react-router-dom';

import Film from '../views/Film';
import Cinema from '../views/Cinema';
import City from '../views/City';
import Center from '../views/Center';
import NotFound from '../views/NotFound';

import NowPlaying from '../views/film/NowPlaying';
import ComingSoon from '../views/film/ComingSoon';
import FilmDetail from '../views/FilmDetail';

interface IProps {
  children?: React.ReactNode;
}

const MyRouter: React.FC<IProps> = (props) => {
  return (
    <HashRouter>
      <Routes>
        <Route
          path="/cinema"
          element={<Cinema></Cinema>}
        />
        <Route
          path="/city"
          element={<City></City>}
        />
        <Route
          path="/center"
          element={<Center></Center>}
        />
        <Route
          path="/film"
          element={<Film></Film>}
        >
          <Route
            path="nowPlaying"
            element={<NowPlaying></NowPlaying>}
          />
          <Route
            path="comingSoon"
            element={<ComingSoon></ComingSoon>}
          />

          {/* 重定向 Navigate */}
          <Route
            path=""
            element={<Navigate to="/film/nowPlaying" />}
          />
        </Route>
        <Route
          path="detail/:id"
          element={<FilmDetail></FilmDetail>}
        />
        <Route
          path="/"
          element={<Navigate to="/film" />}
        />
        {/* 404 */}
        <Route
          path="*"
          Component={NotFound}
        />
      </Routes>
      {props.children}
    </HashRouter>
  );
};

export default MyRouter;
